<template>
  <!--每天一练任务详情页-->
  <view class="practiceEveryDayDetails flex flex-column">
    <EveryDayHead v-if="practiceType == '1'" :detail="headerInfo"></EveryDayHead>
    <OnLineHead v-if="practiceType == '2'" :detail="headerInfo"></OnLineHead>
    <RivalryHead v-if="practiceType == '3'" :detail="headerInfo" type="view"></RivalryHead>
    <AwardHead v-if="practiceType == '4'" :detail="headerInfo" type="view"></AwardHead>
    <view class="line" style="height: 10px"></view>
    <view class="table f_1 flex flex-column">
      <Table :table-data="tableData" @rowClick="rowClick" @scrolltolower="scrolltolower" class="f_1"></Table>
      <Operate :uuid="upgPracticeUuid" :practiceType="practiceType"></Operate>
    </view>
  </view>
</template>

<script>
import { pageUpgPracticeDate, getPracticeCountHeader, getPracticeSet, pageLcPracticeCountStudent, getLcPracticeCountHeader } from "@/improve/services";
import Table from "@/improve/components/Table/Table.vue";
import Operate from "./components/Operate.vue";
import EveryDayHead from "./components/head/EveryDayHead.vue";
import OnLineHead from "./components/head/OnLineHead.vue";
import RivalryHead from "./components/head/RivalryHead.vue";
import AwardHead from "./components/head/AwardHead.vue";
import { titleMap } from '@/improve/components/enum'
import { formatTime } from "@/utils/PrjUtils";

const tableMap = {
  "1": "dailyTableData",
  "2": "onLineTableData",
  "3": "rivalryTableData",
  "4": "awardTableData"
}
export default {
  name: "historicalCreationDetail",
  components: { EveryDayHead, Operate, Table, OnLineHead, RivalryHead, AwardHead },
  data() {
    return {
      upgPracticeUuid: "",
      practiceType: "1",
      detail: {},
      headerInfo: {},
      dailyTableData: {
        statisticsTitle: "每日统计",
        title: ["编号", "练习日期", "练习人数"],
        list: [],
        props: [
          {
            key: 'index',
            width: '20%',
          },
          {
            key: 'date',
            width: '55%',
          },
          {
            key: 'num',
            width: '25%',
          }
        ]
      },
      onLineTableData: {
        statisticsTitle: "答题数据",
        title: ["姓名", "练测次数", "平均正确率"],
        list: [],
        props: [
          {
            key: 'nickName',
            width: '40%',
          },
          {
            key: 'times',
            width: '30%',
          },
          {
            key: 'rate',
            width: '30%',
          },
        ]
      },
      rivalryTableData: {
        statisticsTitle: "闯关数据",
        title: ["姓名", "关卡数", "平均正确率"],
        list: [],
        props: [
          {
            key: 'nickName',
            width: '40%',
          },
          {
            key: 'levels',
            width: '30%',
          },
          {
            key: 'rate',
            width: '30%',
          },
        ]
      },
      awardTableData: {
        statisticsTitle: "答题数据",
        title: ["姓名", "得分", "用时"],
        list: [],
        props: [
          {
            key: 'nickName',
            width: '30%',
          },
          {
            key: 'score',
            width: '45%',
          },
          {
            key: 'answerTime',
            width: '25%',
          }
        ]
      },
      pageNo: 1,
      pageTotal: 0
    }
  },
  computed: {
    tableData() {
      return this.practiceType == '2' ? this.onLineTableData : this.practiceType == '3' ? this.rivalryTableData : this.practiceType == '4' ? this.awardTableData : this.dailyTableData
    }
  },
  methods: {
    getDetails() {
      getPracticeSet(this.upgPracticeUuid).then(res => {
        this.detail = res;
      })
    },
    // 获取头部信息 - 通用
    getPracticeCountHeader() {
      getPracticeCountHeader({ upgPracticeUuid: this.upgPracticeUuid }).then(res => {
        this.headerInfo = res;
      })
    },
    // 获取每日统计 - 每日一练 / 知识竞赛 / 有奖答题
    getDailyStatistics() {
      pageUpgPracticeDate({ upgPracticeUuid: this.upgPracticeUuid, pageNo: this.pageNo, pageSize: 10 }).then(res => {
        const data = res.datas.map(i => {
          return { ...i, rate: i.rate ? `${i.rate}%` : '-', answerTime: !i.answerTime || i.answerTime <= 0 ? '00:00:00' : formatTime(i.answerTime) }
        })
        this[tableMap[this.practiceType]].list = this.pageNo === 1 ? [...data] : [...this[tableMap[this.practiceType]].list, ...data]
        this.pageTotal = res.totalPage
      })
    },
    // 获取每日统计 - 在线练测
    pageLcPracticeCountStudent() {
      pageLcPracticeCountStudent({ upgPracticeUuid: this.upgPracticeUuid, pageNo: this.pageNo, pageSize: 10 }).then(res => {
        const data = res.datas.map(i => {
          return { ...i, rate: i.rate ? `${i.rate}%` : '-' }
        })
        this.onLineTableData.list = this.pageNo === 1 ? [...data] : [...this.list, ...data]
        this.pageTotal = res.totalPage
      })
    },

    rowClick(item) {
      if (this.practiceType == '1') {
        uni.navigateTo({
          url: `/improve/publish/statistics/dailyStatistics?upgPracticeUuid=${this.upgPracticeUuid}&date=${item.date}`
        })
      }
      if (this.practiceType == '2') {
        console.log(item.upgPracticeJoinIds)
        uni.navigateTo({
          url: `/improve/publish/answerDetail/index?practiceType=${this.detail.practiceType}&studentId=${item.studentId}&upgPracticeUuid=${this.upgPracticeUuid}&upgPracticeJoinIds=${item.upgPracticeJoinIds}`,
        })
      }
      if (this.practiceType == '3') {
        uni.navigateTo({
          url: `/improve/publish/answerDetail/index?practiceType=${this.detail.practiceType}&studentId=${item.studentId}&upgPracticeUuid=${this.upgPracticeUuid}&correctRate=${item.rate}`,
        })
      }
      if (this.practiceType == '4') {
        uni.navigateTo({
          url: `/improve/publish/answerDetail/index?practiceType=${this.detail.practiceType}&studentId=${item.studentId}&upgPracticeUuid=${this.upgPracticeUuid}&joinUuid=${item.joinUuid}`,
        })
      }
    },
    scrolltolower() {
      if (this.pageNo < this.pageTotal) {
        this.pageNo++;
        if (this.practiceType == '2') {
          this.pageLcPracticeCountStudent()
        } else {
          this.getDailyStatistics()
        }
      }
    }
  },
  onLoad(options) {
    this.practiceType = options.practiceType
    this.upgPracticeUuid = options.upgPracticeUuid
    wx.setNavigationBarTitle({
      title: titleMap[this.practiceType] + '详情'
    });
  },
  onShow() {
    this.getDetails()
    this.getPracticeCountHeader()
    if (this.practiceType == '2') {
      this.pageLcPracticeCountStudent()
    } else {
      this.getDailyStatistics()
    }
  },
  // 1.发送给朋友
  onShareAppMessage(res) {
    return {
      title: this.detail.practiceName,
      path: `/improve/join/practiceDetail?upgPracticeUuid=${this.upgPracticeUuid}&practiceType=${this.detail.practiceType}`,
      imageUrl: '',
    }
  },
  //2.分享到朋友圈
  onShareTimeline(res) {
    return {
      title: this.detail.practiceName,
      path: `/improve/join/practiceDetail?upgPracticeUuid=${this.upgPracticeUuid}&practiceType=${this.detail.practiceType}`,
      imageUrl: '',
    }
  },
}
</script>

<style scoped lang="scss">
.practiceEveryDayDetails {
  height: 100vh;
  width: 100vw;
  // padding-bottom: calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .table {
    margin-top: 10px;
    background-color: #FFFFFF;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
</style>